vue-router 笔记整理

• 组件内使用路由

  watch可以监听，或者beforeRouteUpdate 钩子函数监听。用途？
  用途：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个
  /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取
  用户信息)。

• 路由的三大模式

  路由模式（history、
  hash 和 abstract）路由的push等同window.history.pushState(一个状态对象,
  title, url)

• 路由组件传参

  使用props 将组件和路由解耦

• 路由守卫（钩子函数

  全局的,单个路由独享的, 组件级的
  全局：router.beforeEach（to, from, next）异步解析 状态有“等待中”，“确定的”
  router.afterEach（to, from）
  路由独享钩子：beforeEnter（to, from, next） 用法同全局的
  router.beforeEach（）
  组件级：

  beforeRouteEnter（to，from， next）
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 this
  // 因为当守卫执行前，组件实例还没被创建
  
  beforeRouteUpdate（to，from， next）
      // 在当前路由改变，但是该组件被复用时调用
     // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之
     间
     //跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下
    被调用。
    // 可以访问组件实例 `this`
  
     beforeRouteLeave（to，from， next ）
     // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`

  beforeRouteLeave 这个钩子函数很有用，顾名思义，导航离开该组件对应的路由调用，可以做一些
  离开时候的comfirm判断，比如有重要的信息需要用户保存后才能进行跳转、存储session、清除定
  时器等。

• 路由元信息：
  可以配置 meta 字段，通常用来做是否需要登录的判断
  meta: { requiresAuth: true }
• 路由的过渡：
  设置不同的 name 比如name=fade
• 数据获取：（比较陌生，后续着重看）
  导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
  导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

• 滚动行为
  这个功能只在支持 history.pushState 的浏览器中可用

const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })

• 路由懒加载
  结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载

  参考文献

• vue-router 中文官方文档